//@ts-nocheck
/** 测试vdom.tsx updateClassComponent */
import React from '../../react'
// import React from 'react'
import ReactDOM from '../../react-dom';
// import ReactDOM from 'react-dom';

class ClassCounter extends React.Component{
  shouldComponentUpdate(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean {
    console.log('nextProps:', nextProps);
    console.log('this.props:', this.props);
    console.log('nextState:', nextState);
    console.log('this.state:', this.state);
  }

  render(){
    return (
      <div id={'counter' + this.props.number}>
        <button onClick={this.props.handleClick}>+</button>
      </div>
    );
  }
}

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {number: 0}
  }

  handleClick = () => {
    this.setState(state => ({number: state.number + 1}));
  };

  render(){
    return (
      <ClassCounter number={this.state.number} handleClick={this.handleClick}/>
    );
  }
}

ReactDOM.render(
  <Counter/>,
  document.getElementById('root')
);
